<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="bundle.js"></script>
		<style type="text/css">
			* {
			margin: 0;
			padding: 0;
		}
	#box {
		width: 200px;
		height: 200px;
		background: red;
		position: absolute;
		top: 0;
		left: 0;
	}
	p {
			padding: 0;
			margin: 0;
			width: 80px;
			height: 80px;
			border: 10px dashed cyan;
			position: absolute;
			top: 0;
			left: 0;
		}
		#box1 {
			width: 200px;
			height: 200px;
			background: red;
			position: absolute;
			top: 220px;
			left: 0;
		}
		</style>
	</head>
	<body>
		<div id="box"></div>
		<div id="box1"></div>
	</body>
	<script>
		class  push{
			constructor(str){
				this.parent=document.querySelector("body")
				this.obox=document.getElementById(str)
				this.pull()
			}
			pull() {
				var _this=this
				_this.obox.onmousedown=function(ev){
					var ev=ev||event
					var disX=ev.clientX-_this.obox.offsetLeft
					var disY=ev.clientY-_this.obox.offsetTop
					document.onmousemove=function(ev){
						var ev=ev||event
						var x=ev.clientX-disX
						var y=ev.clientY-disY
						_this.obox.style.left=x+"px"
						_this.obox.style.top=y+"px"
					}
					document.onmouseup=function(){
						document.onmousemove=null
						document.onmouseup=null
					}
				}
			}
		}
		class pushWidthBor extends push {
			constructor(str){
					super(str)
					this.run()
				}
			run () {
				var _this=this
				var op=document.createElement("p")
				console.log(_this.parent)
				_this.parent.appendChlid(op)
			}
		}
		window.onload=function(){
			new push("box")
			new pushWidthBor("box1")
		}
//		var obox=document.getElementById("box")
//		obox.onmousedown=function(ev){
//			var ev=ev||event
//			var disX=ev.clientX-obox.offsetLeft
//			var disY=ev.clientY-obox.offsetTop
//			document.onmousemove=function(ev){
//				var ev=ev||event
//				var x=ev.clientX-disX
//				var y=ev.clientY-disY
//				obox.style.left=x+"px"
//				obox.style.top=y+"px"
//			}
//			document.onmouseup=function(){
//				document.onmousemove=null
//				document.onmouseup=null
//			}
//		}
		
	</script>
</html>
